<template>
  <div id="homeIndex">
    <swiper :list="bannerLists" height="3.5rem" :duration="500" :auto="true" :loop="true" dots-position="center" dots-class="homedots"></swiper>
    <grid class="homeGrid" :cols="3">
      <grid-item class="homeGrid-item" :label="linkList.title" :link="linkList.url" v-for="linkList in linkLists" :key="linkList.title">
        <img slot="icon" :src="linkList.img">
      </grid-item>
    </grid>
    <certification-input v-if="certificationShow" :enable="certificationNeed"></certification-input>
    <certification-tips v-if="certificationShow" :beginTime="certificationtime" :tipsTime="certificationnoticetime"></certification-tips>
    <announcement :msg="noticeContent"></announcement>
    <foot-guide :select="0"></foot-guide>
  </div>
</template>

<script>
import { Swiper, Grid, GridItem, dateFormat } from "vux";
import footGuide from "../../../components/footer/footGuide";
import { bannerList, linkList } from "./config.js";
import Announcement from "../../../components/common/Announcement.vue";
import certificationTips from "../../certification/certificationTips.vue";
import certificationInput from "../../certification/certificationInput.vue";
export default {
  data() {
    return {
      startTime: 1256055618,
      endTime: 1256055660,
      bannerLists: null, //轮播图列表
      linkLists: null, //链接数据
      noticeContent: "公告内容",
      certificationShow: false,
      certificationNeed: false,
      certificationtime: "",
      certificationnoticetime: ""
    };
  },
  created() {
    this.bannerLists = bannerList;
    this.linkLists = linkList;
    //公告
    this.apiService.user.getcertification().then(res => {
      // this.certificationShow = res.data.isshow == 0 ? false : true;
      // this.certificationNeed = res.data.iscertification == 0 ? false : true;
      this.certificationShow = true;
      this.certificationNeed = true;
      this.certificationtime = dateFormat(
        res.data.certificationtime * 1000,
        "MM月DD日"
      );
      this.certificationnoticetime = dateFormat(
        res.data.certificationnoticetime * 1000,
        "MM月DD日"
      );
      this.apiService.index.notice().then(res => {
        this.noticeContent = res.data.content;
      });
    });
  },
  components: {
    footGuide,
    Swiper,
    Grid,
    GridItem,
    Announcement,
    certificationTips,
    certificationInput
  }
};
</script>
<style scoped>
#homeIndex {
  height: 100%;
  padding-bottom: 53px;
  position: relative;
}
#homeIndex .homeGrid::before,
#homeIndex .homeGrid::after,
#homeIndex .homeGrid-item::before,
#homeIndex .homeGrid-item::after {
  border: none;
}
#homeIndex .homeGrid {
  padding: 0.1rem;
  overflow: auto;
  height: 70%;
}
#homeIndex .homeGrid-item {
  width: 30%;
  height: 2.6rem;
  margin: 1.66666%;
  border-radius: 0.1rem;
  background-color: #fff;
}
</style>
<style>
#homeIndex .homedots i {
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 50%;
}
#homeIndex .homedots .active {
  background-color: rgb(14, 141, 236);
}
#homeIndex .homeGrid-item .weui-grid__icon {
  width: 1.2rem;
  height: auto;
}
#homeIndex .homeGrid-item .weui-grid__label {
  font-size: 0.3rem;
  margin-top: 0.3rem;
}
</style>
